<template>
  <div id="home">
    <div class="banner">
		<el-carousel :interval="5000" arrow="always" height="350px">
		    <el-carousel-item v-for="item in carouseData" :key="item">
		     <img :src="item.url" alt=""  style="width: 100%"/>
		    </el-carousel-item>
		  </el-carousel>
	</div>
    <div class="body">
      <!-- 日志 -->
      <div class="journal">
        <div class="left">
          <div class="center">
            <div class="left">
              <div class="top">
                <p>History</p>
              </div>
              <div class="middle">
                历史文化
              </div>
              <div class="more">
                <router-link to="/journal">MORE+</router-link>
              </div>
            </div>
            <div class="br"></div>
          </div>
        </div>
        <div class="right">
          <!-- 上面两个展示 -->
          <div class="top">
            <div class="shows" v-for="item in journalData" :key="item._id">
              <div class="show">
                <div class="img">
                  <img :src="baseURL+item.cover[0]" alt="">
                </div>
                <div class="introduce">
                  <div class="title">
                    <router-link :to="/article/+item._id+'?type=journal'" target="_blank">{{item.title}}</router-link>
                  </div>
                  <div class="text">
                    {{item.des}}
                  </div>
                  <div class="time">
                    {{conversionYear(item.date)}}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 下面三个展示 -->
          <div class="navShows">
            <div class="show" v-for="item in journalData2" :key="item._id">
              <div class="left">
                <div class="year">{{conversionyy(item.date)}}</div>
                <div class="month">{{conversionxx(item.date)}}</div>
              </div>
              <div class="vr"></div>
              <div class="right">
                <div class="title">
                  <router-link :to="/article/+item._id+'?type=journal'" target="_blank">{{item.title}}</router-link>
                </div>
                <div class="text">
                  {{item.des}}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 相册 -->
      <div class="album">
        <div class="title">
          <div class="als">Memory</div>
          <div class="vr"></div>
          <div class="ss">历史回忆</div>
        </div>
        <div class="imgShows">
          <div class="imgList active">
            <div class="img">
              <img :src="baseURL+coverImglist.one.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.one.title}}
            </div>
          </div>
          <div class="imgList">
            <div class="img">
              <img :src="baseURL+coverImglist.two.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.two.title}}
            </div>
          </div>
           <div class="imgList">
            <div class="img">
              <img :src="baseURL+coverImglist.three.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.three.title}}
            </div>
          </div>
          <div class="imgList">
            <div class="img">
              <img :src="baseURL+coverImglist.four.src" alt="">
            </div>
            <div class="title">
              {{coverImglist.four.title}}
            </div>
          </div>
        </div>
        <div class="more">
          <router-link to="/album">MORE</router-link>
        </div>
      </div>
    </div>
    <div class="share">
      <div class="center">
        <div class="title">
          <div class="als">Cultural Spirit</div>
          <div class="vr"></div>
          <div class="ss">文化精神</div>
          <div class="more">
            <router-link to="/share">
              MORE+
            </router-link>
          </div>
        </div>
        <div class="navLists">
          <div class="list" v-for="item in shareData" :key="item._id">
            <div class="left">
              <div class="year">{{conversionyy(item.date)}}</div>
              <div class="month">{{conversionxx(item.date)}}</div>
            </div>
            <div class="vr"></div>
            <div class="right">
              <div class="title">
                <router-link :to="/article/+item._id+'?type=share'" target="_blank">
                  {{item.title}}
                </router-link>
              </div>
              <div class="des">
                {{item.des}}
              </div>
               <div class="imgs">
                <el-image
                  style="width: 290px;height: 170px;"
                  v-for="chirdItem in item.cover"
                  :ket="chirdItem._id"
                  :src="baseURL+chirdItem"   
                  lazy   
                >
                <template #error>
                  <div class="image-slot">
                    <i class="iconfont icon-bianzu"></i>
                图片加载失败
                  </div>
                </template>
                <template #placeholder>
                  <div class="error">
                    <el-icon class="is-loading">
                      <i class="iconfont icon-zhengzaijiazai" style="font-size='20px'"></i>
                </el-icon>
                图片正在加载
                  </div>
                </template>
                </el-image>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import $ from 'jquery';
export default {
  name: 'Home',
  data(){
    return{
      isAnimate:false,  // 是否显示动画 滚动高度  
      // 浏览量前二的日志
      journalData:[],
      // 浏览量前五的日志
      journalData2:[],
      // 获取封面相册
      coverImglist:{
        one:"",
        two:"",
        three:"",
        four:""
      },
      // 获取个人档
      personalData:{},
      // 获取分享
      shareData:[],
	  carouseData: [
	          { url: require("../assets/img/lubo1.webp") },
	          { url: require("../assets/img/lubo2.webp") },
	          { url: require("../assets/img/lubo3.webp") },
	          { url: require("../assets/img/lubo4.webp") },
	          { url: require("../assets/img/lubo5.webp") }
	        ]
    }
  },
  components: {
    
  },
  methods:{
    // 获取浏览量前5的日志
    async getJournalData(){
      let {data} = await this.$axios.get("/client/journal/getvistor")
      if(data.code) return this.$message.warning(data.mes)
      this.journalData = data.data.splice(0,2)
      this.journalData2 = data.data.splice(0,3)
    },
    // 时间转化
    conversionYear(data){
      let time = new Date(data)
      let year = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+(time.getMonth()+1):time.getMonth()+1
      let day = time.getDate()<10?"0"+time.getDate():time.getDate()
      return `${year}-${month}-${day}`
    },
    // 时间转化 年
    conversionyy(date){
      let time = new Date(date)
      let year = time.getFullYear()
      return year
    },
    // 时间转化 年-月
    conversionxx(date){
      let time = new Date(date)
      let year = time.getFullYear()
      let month = time.getMonth()+1<10?"0"+(time.getMonth()+1):time.getMonth()+1
      return `${year}-${month}`
    },
    // 获取封面图片
    async getCoverImglist(){
      let {data} = await this.$axios.get("/client/album/imgs",{
        params:{
          type:"封面相册"
        }
      })
      if(data.code) return this.$message.warning(data.mes)
      this.coverImglist.one = data.data[0]
      this.coverImglist.two = data.data[1]
      this.coverImglist.three = data.data[2]
      this.coverImglist.four = data.data[3]
    },
    // 获取个人档
    async getPersonalData(){
      let {data} = await this.$axios.get("/client/personal/getInfo")
      if(data.code) return this.$message.warning(data.mes)
      this.personalData = data.data
    },
    // 获取分享前三篇文章
    async getShareData(){
      let {data} = await this.$axios.get("/client/share/getvistor")
      if(data.code) return this.$message.warning(data.mes)
      this.shareData = data.data
    }

  },
  created(){
    // 获取日志
    this.getJournalData()
    // 获取封面相册
    this.getCoverImglist()
    // 获取个人档
    this.getPersonalData()
    // 获取分享前三篇文章
    this.getShareData()

  },
  mounted(){
    let imgList = $(".imgList")
    $.each(imgList,(index,value)=>{
      $(value).hover(()=>{
        $(value).addClass("active").siblings().removeClass("active")
      })
    })

  }
}
</script>

<style scoped lang='less'>
#home{
  width: 100%;
  background: url("../assets/img/home02.jpg") no-repeat;
  .banner{
      width: 1000px;
      height: 350px;
	  margin: 0 auto;
     /* background: url("../assets/img/home01.jpg") no-repeat; */
    }
	.el-carousel__item h3 {
	    color: #475669;
	    font-size: 18px;
	    opacity: 0.75;
	    line-height: 300px;
	    margin: 0;
	  }
	  
	  .el-carousel__item:nth-child(2n) {
	    background-color: #99a9bf;
	  }
	  
	  .el-carousel__item:nth-child(2n+1) {
	    background-color: #d3dce6;
	  }
  .body{
    width: 1200px;
    margin: 50px auto;
    position: relative;
    // 日志
    .journal{
      width: 100%;
      position: relative;
      display: flex;
      justify-content: space-between;
      .left{
        width: 190px;
        .center{
          width: 100%;
          display: flex;
          justify-content: space-between;
          .left{
           width: 150px;
            text-align: right;
            .top{
            width: 100%;
            height: 35px;
            justify-content: space-around;
            p{
              font-size: 26px;
              color: #444444;
              text-align: right;
            }
            }
            .middle{
              font-size: 20px;
              color: #444444;
            }
            .more{
              margin-top: 30px;
              a{
                color:#666666;
                font-size: 14px;
                text-decoration: none;
              }
            }
          }
          .br{
            width: 2.5px;
            height: 20px;
            margin-top: 3px;
            background-color: #FFC001;
          }
        }
      }
      .right{
        width: 941px;
        .top{
          width: 100%;
          height: 347px;
          display: flex;
          justify-content: space-between;
          .shows{
            width: 455.5px;
            height: 347px;
            border-radius: 8px;
            overflow: hidden;
            background-color: #fff;
            box-shadow: 1px 0px 10px #e0dfdf;
            .img{
              width: 455.5px;
              height: 200px;
              img{
                width: 100%;
                height: 100%;
              }
            }
            .introduce{
              width: 425.5px;
              height: 116px;
              padding: 15px;
              animation: rubberBand;
              animation-duration: 1s;
              .title{
                width: 100%;
                a{
                  display: block;
                  width: 100%;
                  text-decoration: none;
                  color: #333333;
                  &:hover{
                    color: #FFC001;
                  }
                }
              }
              .text{
                width: 100%;
                color: #878787;
                line-height: 26px;
                margin-top: 14px;
                font-size: 14px;
                white-space: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box; 
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
              .time{
                color: #999999;
                margin: 20px 0 0;
                font-size: 14px;
              }
            }
          }
        }
        .navShows{
          width: 881px;
          margin-top: 30px;
          background-color: #fff;
          padding: 10px 30px;
          border-radius: 8px;
          overflow: hidden;
          box-shadow: 1px 0px 10px #eeeded;
          .show{
            width: 100%;
            height: 85px;
            padding: 20px 0;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #eeeded;
            animation: rubberBand;
            animation-duration: 1s;
            &:last-child{
              border-bottom: none;
            }
            .left{
              width: 76px;
              height: 72px;
              .year{
                font-size: 24px;
                color: #626971;
                margin-top: 10px;
              }
              .month{
                font-size: 14px;
                color: #626971;
                margin-top: 10px;
              }
            }
            .vr{
              background-color: rgb(226, 224, 224);
              width: 1px;
              height: 60px;
              margin: 0 30px 0 20px;
            }
            .right{
              width: 100%;
              height: 100%;
              .title{
                width: 100%;
                a{
                  color: #333333;
                  font-size: 16px;
                  text-decoration: none;
                  &:hover{
                    color: #FFC001;
                  }
                }
              }
              .text{
                font-size: 14px;
                color: #878787;
                width: 100%;
                height: 50px;
                margin-top: 12px;
                line-height: 26px;
                white-space: normal;
                text-overflow: ellipsis;
                overflow: hidden;
                display: -webkit-box; 
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
          }
        }
      }
    }
    // 相册
    .album{
      width: 1200px;
      // height: 440px;
      margin: 70px 0;
      .title{
        width: 266px;
        height: 80px;
        margin: auto;
        text-align: center;
        .als{
          color: #444444;
          font-size: 26px;
        }
        .vr{
          width: 30px;
          height: 2px;
          background-color: #FFC001;
          margin: 22px auto;
        }
        .ss{
          font-size: 20px;
          color: #444444;
        }
        
      }
      .imgShows{
        width: 1200px;
        height: 440px;
        margin-top: 70px;
        display: flex;
        align-items: center;
        border-radius: 0;
        .imgList{
          width: 277px;
          height: 340px;
          box-shadow: 3px 0px 10px #dbdbdb;
          &.active{
            width: 370px;
            height: 420px;
            transition: all .4s;
            .img{
              width: 370px;
              height: 365px;
            }
            .title{
              width: 370px;
              height: 55px;
              background-color: #fff;
              text-align: center;
              line-height: 55px;
              font-size: 14px;
              color: #777777;
              display: block;
            }
          }
          .img{
            width: 100%;
            height: 100%;
            img{
              width: 100%;
              height: 100%;
            }
          }
          .title{
            display: none;    
          }
        }
      }
      .more{
        width: 162px;
        height: 50px;
        color: #fff;
        font-weight: bold;
        font-size: 16px;
        background-color: #FFC001;
        margin: 50px auto;
        text-align: center;
        line-height: 50px;
        border-radius: 30px;
        cursor: pointer;
        a{
          width: 100%;
          height: 100%;
          display: block;
          text-decoration: none;
          color: #fff;
        }
      }
    }
  }
  // 个人档
  .personal{
    width: 100%;
    background-color: #FAFAFA;
    padding: 90px 0;
    .center{
      width: 1200px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      .left{
        width: 232px;
        padding-top: 30px;
        text-align: right;
        .title{
          font-size: 26px;
          color: #444444;

        }
        .info{
          font-size: 20px;
          color: #444444;
          margin-top: 10px;
        }
        .more{
          margin-top: 40px;
          a{
            color: #666666;
            text-decoration: none;
            font-size: 14px;
          }

        }
      }
      .vr{
        width: 2.2px;
        height: 20px;
        background-color: #FFC001;
        margin-left: -40px;
        margin-top: 34px;
      }
      .right{
        width: 883px;
        height: 392px;
        border-radius: 8px;
        display: flex;
        box-shadow: 3px 0px 10px #e1e1e2;
        .img{
          width: 283px;
          height: 392px;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .me{
          width: 500px;
          height: 292px;
          padding: 50px;
          .title{
            font-size: 20px;
            color: #444444;
            padding-bottom: 30px;
            border-bottom: 1px solid #e2e0e0;
            margin-bottom: 30px;
          } 
          .info-lists{
            display: flex;
            justify-content: space-between;
            p{
              width: 190px;
              height: 40px;
              line-height: 40px;
              font-size: 14px;
              color: #777777;
              &.p2{
                width: 294px;
                .type{
                  margin-right: 30px;
                }
              }
              .type{
                margin-right: 25px;
              }
            }
          }
        }
      }
    }
  }
  // 分享
  .share{
    width: 100%;
    background: url("../assets/img/home02.jpg");
    padding-top: 50px;
    .center{
      width: 1200px;
      margin: 0 auto;
      .title{
        width: 266px;
        height: 80px;
        margin: auto;
        text-align: center;
        .als{
          color: #444444;
          font-size: 26px;
        }
        .vr{
          width: 30px;
          height: 2px;
          background-color: #FFC001;
          margin: 22px auto;
        }
        .ss{
          font-size: 20px;
          color: #444444;
        }
        .more{
          width: 162px;
          height: 50px;
          color: #fff;
          font-weight: bold;
          font-size: 16px;
          background-color: #FFC001;
          margin: 20px auto;
          text-align: center;
          line-height: 50px;
          border-radius: 30px;
          cursor: pointer;
          a{
            width: 100%;
            height: 100%;
            display: block;
            text-decoration: none;
            color: #fff;
          }
        }
      } 
      .navLists{
        width: 100%;
        margin-top: 120px;
        padding-bottom: 40px;
        .list{
          width: 100%;
          height: 320px;
          display: flex;
          justify-content: space-between;
          margin-bottom: 70px;
          &:last-child{
            margin-bottom: 0px;
          }
          .left{
            width: 92px;
            height: 58px;
            text-align: left;
            margin-top: 20px;
            .year{
              font-size: 24px;
              color: #444444;
            }
            .month{
              font-size: 14px;
              color: #777777;
              margin-top: 10px;
            }
          }
          .vr{
            width: 1.5px;
            height: 320px;
            background-color: rgb(235, 233, 233);
            margin: 0 70px;
          }
          .right{
            width: 930px;
            height: 280px;
            padding: 20px 0;
            text-align: left;
            .title{
              width: 100%;
              text-align: left;
              a{
                text-decoration: none;
                color:#444444;
                font-size: 16px;
              }
            }
            .des{
              width: 100%;
              height: 50px;
              line-height: 25px;
              margin-top: -40px;
              color: #777777;
              font-size: 14px;
              white-space: normal;
              text-overflow: ellipsis;
              overflow: hidden;
              display: -webkit-box; 
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
            .imgs{
              width: 100%;
              height: 170px;
              display: flex;
              justify-content: space-between;
              margin-top: 25px;
              .el-image{
                display: flex;
                justify-content: center;
                .image-slot,.error{
                  display: flex;
                  color: #999;
                  font-size: 17px;
                  flex-direction: column;
                  justify-content: space-evenly;
                  align-items: center;
                  i{
                    font-size: 40px;
                  }
                }
              }
              img{
                width: 290px;
                height: 170px;
                border-radius: 8px;
              }
            }
          }
        }
      }
    }
  }
}
</style>
